<template>  
  <div class="login-container">  
    <div class="login-box">
      <el-form :model="loginForm" ref="loginForm" status-icon>  
        <el-form-item label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名' }]">  
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>  
        </el-form-item>  
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">  
          <el-input  
            v-model="loginForm.password"  
            :type="showPassword ? 'text' : 'password'"  
            placeholder="请输入密码"  
          >  
          </el-input>  
          <el-checkbox v-model="showPassword">显示密码</el-checkbox>
          <a href="#" @click.prevent="openChangePasswordDialog" style="float: right;">修改密码</a>
        </el-form-item>  
        <el-form-item>  
          <el-button type="primary" @click="handleLogin" style="width: 100%">登录</el-button>  
        </el-form-item>  
      </el-form>  
    </div>
    <el-dialog title="修改密码" :visible.sync="changePasswordDialogVisible" :close-on-click-modal="false" :width="'30%'">
    <el-form :model="changePasswordForm">
      <el-form-item label="账号" prop="oldPassword" style="height: 55px;">
        <el-input type="text" v-model="changePasswordForm.account"></el-input>
      </el-form-item>
      <el-form-item label="原密码" prop="oldPassword" style="height: 55px;">
        <el-input type="text" v-model="changePasswordForm.oldPassword"></el-input>
      </el-form-item>
    <el-form-item label="新密码" prop="newPassword" style="height: 55px;">
      <el-input type="text" v-model="changePasswordForm.newPassword" @input="validateNewPassword"></el-input>
      <div v-if="newPasswordSameAsOld && changePasswordForm.oldPassword" style="color: red;text-align: right;width:290px;">新密码不能与原密码相同</div> <!-- 新增提示 -->
    </el-form-item>
    <el-form-item label="确认新密码" prop="confirmPassword" style="height: 55px;">
      <el-input type="text" v-model="changePasswordForm.confirmPassword" @input="validateConfirmPassword"></el-input>
      <div v-if="passwordsMismatch && changePasswordForm.confirmPassword" style="color: red;text-align: right;width:290px;">新密码和确认新密码必须相同</div> <!-- 新增提示 -->
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="changeCancel" style="z-index: 1;">取 消</el-button>
      <el-button type="primary" @click="handleChangePassword">确 定</el-button>
    </span>
  </el-dialog>
  </div>  

</template>  

<script>  
import { mapActions } from 'vuex';  
import { updatePassword } from '@/api/user';
import {addLog} from '@/api/log';
export default {  
  data() {  
    return {  
      loginForm: {  
        username: '',  
        password: ''  
      },  
      showPassword: false,
      changePasswordDialogVisible: false,
      changePasswordForm: {
        account:'',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      logItem:{
        mn:'',
        opn:'',
        res:''
      },
      passwordsMismatch: false
    };  
  },  
  mounted() {  
    this.loginForm.username = ''; // 清空用户名  
    this.loginForm.password = ''; // 清空密码  
  },  
  methods: {  
    ...mapActions(['login']), // 映射 Vuex 的登录 action  
    async handleLogin() {  
      try {  
        const response = await this.login(this.loginForm); // 使用 Vuex 的 login 方法  
        this.$message.success('登录成功');  

        // 可以选择存储 token 到 localStorage  
        localStorage.setItem('token', response.token);  
        this.logItem.mn = "handleLogin";
        this.logItem.opn = "登录";
        this.logItem.res = "true";
        addLog(this.logItem);
        this.$router.push('/'); // 登录成功后重定向到主页  
      } catch (error) {  
        this.logItem.mn = "handleLogin";
        this.logItem.opn = "登录";
        this.logItem.res = "false";
        addLog(this.logItem);
        this.$message.error('登录失败: ' + error.message); // 显示具体错误信息  
      }  
    },
    validateNewPassword() {
      this.newPasswordSameAsOld = this.changePasswordForm.newPassword === this.changePasswordForm.oldPassword; // 新增校验
    },
    validateConfirmPassword() {
      this.passwordsMismatch = this.changePasswordForm.newPassword !== this.changePasswordForm.confirmPassword;
    },
    openChangePasswordDialog() {
      this.changePasswordDialogVisible = true;
    },
    changeCancel(){
      this.changePasswordDialogVisible = false;
      this.changePasswordForm.account = '';
      this.changePasswordForm.oldPassword = '';
      this.changePasswordForm.newPassword = '';
      this.changePasswordForm.confirmPassword = '';
    },
    handleChangePassword() {
      // 校验每个输入框都不为空
      if (!this.changePasswordForm.account || 
          !this.changePasswordForm.oldPassword || 
          !this.changePasswordForm.newPassword || 
          !this.changePasswordForm.confirmPassword) {
        this.$message.error('所有字段都是必填的'); // 显示错误信息
        return; // 终止函数执行
      }

      // 校验新密码和确认新密码是否相同
      if (this.passwordsMismatch) {
        this.$message.error('新密码和确认新密码必须相同'); // 显示错误信息
        return; // 终止函数执行
      }
      console.log("更新密码的对象",this.changePasswordForm);
      // 在这里添加修改密码的逻辑
      updatePassword(this.changePasswordForm).then(res=>{
        this.$message.success('修改密码成功');
      }).catch(err=>{
        this.$message.error('修改密码失败');
      })
      //以上添加修改密码逻辑
      this.changePasswordDialogVisible = false; // 关闭弹窗
      this.changePasswordForm
       = {
        account:'',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  }  
};  
</script>  

<style scoped>  
.login-container {  
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/image/login-bg.jpg'); /* 需要你添加背景图片 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-box {
  width: 400px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 美化表单样式 */
:deep(.el-form-item__label) {
  color: #333;
  font-weight: bold;
}

:deep(.el-input__inner) {
  border-radius: 4px;
}

:deep(.el-button--primary) {
  height: 40px;
  font-size: 16px;
}

:deep(.el-checkbox) {
  margin-top: 10px;
  color: #666;
}
:deep(.el-dialog__body){
  padding:0px 30px;
}
:deep(.el-form-item__content){
  line-height: 19px;
}
</style>